<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" width="1000" height="600" style="border: 2px solid; display: block;  margin: 50px auto"></canvas>
<script type="application/javascript">

    var ball = {x:500,y:50,vx:-5,vy:0,g:2,r:10};

    window.onload = function () {
        var other.canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        setInterval(function () {
            render(context);
            update(context);
        },50
        )
    }
    function  render (ctx) {
        ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
        ctx.beginPath();
        ctx.arc(ball.x,ball.y,10,0,2*Math.PI,true);
        ctx.fillStyle="orange";
        ctx.closePath();

        ctx.fill();
    }
    function update(ctx) {
        ball.x =  ball.x+ball.vx;
        ball.y =  ball.y+ball.vy;
        ball.vy = ball.vy+ball.g;
         console.log("ball.y:"+ ball.y+"ctx.canvas.height"+ctx.canvas.height);
        if(ball.y >= 600 - ball.r){
            ball.y = ctx.canvas.height - ball.r;
            ball.vy = -ball.vy*0.5;
            ball.g =  ball.g;

        }
        if(ball.y <= ball.r){
           ball.y = ball.r;
           ball.vy = -ball.vy;
        }

        if(ball.x <= ball.r){
            ball.x = ball.r;
            ball.vx = -ball.vx*0.5;
        }
        if(ball.x >= ctx.canvas.width-ball.r){
            ball.x = ctx.canvas.width-ball.r;
            ball.vx = -ball.vx*0.5;
        }

    }
</script>
</body>
</html>